<template>
	<view class="perInfo">
		<view class="heads">
			<view class="name">头像</view>
			<view class="img" @click="changeImg"><image :src="head_img || ('../../static/missing-face.png')" mode=""></image></view>
		</view>
		<view class="perList">
			<view class="row">
				<view class="name">昵称</view>
				<view class="info"><input class="uni-input" focus :value="inputVal" @input="onKeyInput"/></view>
				<view class="yticon icon-you"></view>
			</view>
			<view class="row">
				<view class="name">出生日期</view>
				<view class="info">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
				<view class="yticon icon-you"></view>
			</view>
		</view>
		<view class="uniBtn" @click="confirm">确定</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex';  
	
	function getDate(type) {
		if(type == 'start'){
			return `1980-01-01`;
		}else if(type == 'end'){
			return `2020-01-01`;
		}else{
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			return `${year}-${month}-${day}`;
		}
	}
	export default {
		data() {
			return {
				inputVal:'起一个靓丽的昵称',
				head_img:'',
				date: getDate({
					format: true
				}),
				startDate:getDate('start'),
				endDate:getDate('end'),
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			...mapMutations(['login']),
			onShow:function(){
				// 正常获取 登陆后缓存的用户名数据
				this.inputVal = this.userInfo.username
				this.head_img = this.userInfo.image
				this.date = this.userInfo.birth?this.userInfo.birth:getDate({
					format: true
				})
			},
			//更换头像
			changeImg:function(){
				var that = this
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					sourceType:['album'],
					success: (res) => {
						var filePath = res.tempFilePaths[0]
						uni.uploadFile({
							url: this.$api._api.ApiUpUpImg,
							filePath: filePath,
							name: 'image',
							//formData:{token:this.userInfo.token,types:3,name:'user'},
							success: (res) => {
								var data = JSON.parse(res.data)
								
								if(data.code == 200){
									let _param = {
										token:that.userInfo.token,
										image:data.data.url,
									};
									that.$api.postUrl(that.$api._api.ApiUserInfo,_param,function(res){
										uni.showToast({
											title:'上传成功！',
											icon:'success',
											duration:1000
										})
									})
									
									that.head_img = data.data.url
									that.userInfo.image = data.data.url
									that.login(that.userInfo);
								}else{
									uni.showToast({
										title:data.msg,
										icon:'none',
										duration:1000
									})
								}
							},
							fail: (err) => {
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						})
					}
				})
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			onKeyInput:function(e){
				this.inputVal = e.detail.value;
			},
			confirm:function(e){
				uni.showModal({
					title: "昵称",
					content: '您的昵称为：' + this.inputVal + '; 出生日期：' + this.date,
					showCancel: false,
					confirmText: "确定",
					success: (res) => {
						let that = this;
						let _param = {
							token:this.userInfo.token,
							username:this.inputVal,
							birth:this.date
						};
						this.$api.postUrl(this.$api._api.ApiUserInfo,_param,function(res){
							that.userInfo.username = that.inputVal
							that.userInfo.birth = that.date
							that.login(that.userInfo);
							that.$api.msg('修改成功！')
						})
					}
				})
			}
		},
	}
</script>

<style>
	page{background:#f5f5f5;}
	.heads,.perList .row{padding: 20rpx;display: flex;align-items: center;justify-content: space-between;background:#fff;}
	.heads{height: 180rpx;line-height: 180rpx;}
	.heads .img{width: 120rpx;height: 120rpx;border-radius: 50%;overflow: hidden;}
	.heads .img image{width: 100%; height: 100%;object-fit: cover;}
	.perInfo .name{font-size: 30rpx;color:#474747;} 
	.perInfo .row .name{flex: 1;}
	.perList{margin-top:20rpx;}
	.perList .row{height: 100rpx;line-height: 100rpx;}
	.perList .row .info{font-size: 26rpx;color:#999;margin-right: 10rpx;}
	.perList .row .info input{color: #666;text-align: right;font-size: 26rpx;}
	.perList .row .iconfont{color:#C9C9C9;font-size: 32rpx;}
	
	.perInfo .uniBtn{margin-top: 100rpx;}
</style>
